<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统安装</title>
    <link rel="stylesheet" href="__LAYUI_MINI__/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="__LAYUI_MINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__LAYUI_MINI__/css/public.css" media="all">
    <link rel="stylesheet" href="__PLUGINS__/formSelects/dist/formSelects-v4.css?v=<{:static_version()}>" media="all">
    <script src="__LAYUI_MINI__/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="__LAYUI_MINI__/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="__LAYUI_MINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="__LAYUI_MINI__/functions.js?v=<{:static_version()}>" charset="utf-8"></script>
    <script src="__PLUGINS__/formSelects/dist/formSelects-v4.js?v=<{:static_version()}>" charset="utf-8"></script>
    <style>
        .layui-layer-setwin .layui-layer-close {
            background-position: 1px -40px!important;
            cursor: pointer!important;
        }
        body{
            background-color: #fff;
        }


        .layuimini-form  .layui-form-item  .required:after {
            content: '*';
            color: red;
            position: absolute;
            margin-left: 4px;
            font-weight: bold;
            line-height: 1.8em;
            top: 6px;
            right: 5px;
        }

    </style>
    <script>

        var $installConfig = {
            indexUrl: "<{:install_url('index')}>",
            loginUrl: "<{:install_url('login')}>",
        }

    </script>
</head>
<body>

    <div class="layuimini-main">
        <div class="layui-col-md8 layui-col-md-offset2">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend style="margin: 0 auto">系统安装</legend>
            </fieldset>
            <{if $is_install}>
                <div style="font-size: 17px;text-align: center;color: #000;line-height: 30px">您已安装，请不要重复安装！</div>
                <div style="font-size: 14px;text-align: center;color: #777;line-height: 25px">前往管理中心 <a href="<{:admin_url('index')}>" style="color: #1e9fff;text-decoration: none;">[点击跳转]</a></div>
            <{/if}>
        </div>
        <{if $is_install != true}>
            <div class="layui-form layuimini-form layui-col-md8 layui-col-md-offset2">
            <blockquote class="layui-elem-quote">基础信息</blockquote>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">应用名称</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="site_name" lay-verify="required" lay-reqtext="应用名称不能为空" placeholder="请输入应用名称"  value="" class="layui-input" maxlength="10">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">应用域名</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="site_domain" lay-verify="required" lay-reqtext="应用域名不能为空" placeholder="https://xxx.com"  value="" class="layui-input" maxlength="100">
                    </div>
                </div>
            </div>
            <blockquote class="layui-elem-quote">数据库</blockquote>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">驱动类型</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" value="Mysql" class="layui-input" disabled maxlength="10">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">主机地址</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="db_hostname" lay-verify="required" lay-reqtext="主机地址不能为空" placeholder="请输入主机地址"  value="" class="layui-input" maxlength="30">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">访问端口</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="db_hostport" lay-verify="required" lay-reqtext="访问端口不能为空" placeholder="请输入访问端口"  value="" class="layui-input" maxlength="30">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">数据库名</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="db_database" lay-verify="required" lay-reqtext="数据库名不能为空" placeholder="请输入数据库名"  value="" class="layui-input" maxlength="30">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">登录账号</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="db_username" lay-verify="required" lay-reqtext="登录账号不能为空" placeholder="请输入登录账号"  value="" class="layui-input" maxlength="30">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">登录密码</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="password" name="db_password" lay-verify="required" lay-reqtext="登录密码不能为空" placeholder="请输入登录密码"  value="" class="layui-input" maxlength="100">
                    </div>
                </div>
            </div>
            <blockquote class="layui-elem-quote">缓存设置</blockquote>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">驱动类型</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" value="Redis" class="layui-input" disabled maxlength="10">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">主机地址</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="cache_host" lay-verify="required" lay-reqtext="主机地址不能为空" placeholder="请输入主机地址"  value="" class="layui-input" maxlength="100">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">访问端口</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="cache_port" lay-verify="required" lay-reqtext="访问端口不能为空" placeholder="请输入访问端口"  value="" class="layui-input" maxlength="30">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">登录密码</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="password" name="cache_password" placeholder="请输入登录密码"  value="" class="layui-input" maxlength="100">
                    </div>
                    <div class="layui-form-mid layui-word-aux">非必填</div>
                </div>
            </div>
            <blockquote class="layui-elem-quote">公众号</blockquote>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">appid</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="mobile_mp_app_id" lay-verify="required" lay-reqtext="appid不能为空" placeholder="请输入appid"  value="" class="layui-input" maxlength="100">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">secret</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="password" name="mobile_mp_app_secret" lay-verify="required" lay-reqtext="secret不能为空" placeholder="请输入secret"  value="" class="layui-input" maxlength="100">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">访问网址</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="mobile_mp_link" lay-verify="required" lay-reqtext="访问网址不能为空" placeholder="https://xxx.com/#"  value="" class="layui-input" maxlength="100">
                    </div>
                </div>
            </div>
            <blockquote class="layui-elem-quote">管理员</blockquote>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">登录账户</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="text" name="admin_user_name" lay-verify="required" lay-reqtext="管理员登录账户不能为空" placeholder="请输入"  value="" class="layui-input" maxlength="100">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">登录密码</label>
                    <div class="layui-input-inline" style="min-width: 320px">
                        <input type="password" name="admin_password" lay-verify="required" lay-reqtext="管理员登录密码不能为空" placeholder="请输入"  value="" class="layui-input" maxlength="100">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="install">安装</button>
                </div>
            </div>
        </div>
        <{/if}>
    </div>
    <script>
        layui.use(['form','miniTab','upload'], function () {
            var form = layui.form,
                layer = layui.layer,
                upload = layui.upload,
                miniTab = layui.miniTab;

            form.render();

            //监听提交
            form.on('submit(install)', function (data) {

                layer.confirm('您真的要安装么？', function(index){

                    let fields = data.field;

                    layer.close(index);
                    var load_index  = layer.load(3);

                    $.ajax({
                        type: 'POST',
                        url: "<{:install_api_url('create')}>",
                        data: fields,
                        timeout: 3600000,// 设置超时时间
                        dataType: "json",
                        success: function(res) {
                            ajax_response_filtr(res,$installConfig);
                            layer.close(load_index);
                            if(res.status == 200){

                                layer.alert("恭喜您，安装成功..", {
                                    icon: 1
                                    ,yes: function(index, layero){
                                        location.href = '<{:admin_url(\'index\')}>';
                                    }
                                });

                            }else{
                                layer.alert(res.message, {
                                    icon: 2
                                });
                            }
                        },
                        error: function (textStatus) {
                            layer.close(load_index);
                            layer.alert('安装失败：未知错误', {
                                icon: 2
                            });
                        },
                        complete: function (XMLHttpRequest,status) {
                            if(status == 'timeout') {
                                layer.close(load_index);
                                xhr.abort();    // 超时后中断请求
                                layer.alert("网咯超时..", {
                                    icon: 2
                                });
                            }
                        }
                    })

                });

                return false;
            });

        });
    </script>
</body>
</html>